<template>
  <div class="homepage">
    <div class="deviceCard">
      <el-card class="box-card">
        <div style="display:flex;justify-content: center;align-items: center">
          <el-image :src="picture[3]" style="width: 100px; height: 100px"></el-image>
          <div class="text item" style="margin-right: 50px">{{ this.nowDevice }}</div>
          <el-button type="primary" plain @click="getNowConfig">更新配置</el-button>
        </div>
      </el-card>
    </div>
    <el-row>
      <el-col :span="6">
        <div class="deviceCard temperature">
          <el-card class="box-card">
            <div style="display:flex;justify-content: center;align-items: center">
              <el-image :src="picture[0]" style="width: 100px; height: 100px"></el-image>
              <div class="text item">温度：<p style="color: chocolate;display: inline">{{ this.parameter.temperature }}℃</p></div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="deviceCard temperature">
          <el-card class="box-card">
            <div style="display:flex;justify-content: center;align-items: center">
              <el-image :src="picture[0]" style="width: 100px; height: 100px"></el-image>
              <div class="text item" v-if="parameter.fire > 150">火焰：<p style="color: chocolate;display: inline">无明火</p></div>
              <div class="text item" v-if="parameter.fire <= 150">火焰：<p style="color: chocolate;display: inline">明火</p></div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="deviceCard smoke">
          <el-card class="box-card">
            <div style="display:flex;justify-content: center;align-items: center">
              <el-image :src="picture[1]" style="width: 100px; height: 100px"></el-image>
              <div class="text item" v-if="parameter.smoke < 50">烟雾浓度：<p style="color: chocolate;display: inline">正常</p></div>
              <div class="text item" v-if="parameter.smoke > 50 && parameter.smoke < 100">烟雾浓度：<p style="color: chocolate;display: inline" >有烟</p></div>
              <div class="text item" v-if="parameter.smoke > 100">烟雾浓度：<p style="color: chocolate;display: inline">高</p></div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="deviceCard light">
          <el-card class="box-card">
            <div style="display:flex;justify-content: center;align-items: center">
              <el-image :src="picture[2]" style="width: 100px; height: 100px"></el-image>
              <div class="text item" v-if="parameter.light">光照情况：<p style="color: chocolate;display: inline">开启</p></div>
              <div class="text item" v-if="!parameter.light">光照情况：<p style="color: crimson;display: inline">关闭</p></div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <div class="time-row">
      <el-row>
        <el-col :span="24">
          <div class="abnormalTime">
            <el-row>
              <el-col :sm="16" :lg="8">
                <el-result
                    icon="warning"
                    :title="abnormalCount.temperature"
                    sub-title="温度异常次数">
                </el-result>
              </el-col>
              <el-col :sm="16" :lg="8">
                <el-result
                    icon="warning"
                    :title="abnormalCount.smoke"
                    sub-title="火焰异常次数">
                </el-result>
              </el-col>
              <el-col :sm="25" :lg="8">
                <el-result
                    icon="warning"
                    :title="abnormalCount.smoke"
                    sub-title="烟雾异常次数">
                </el-result>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getDataAlarm, getDataDisplay} from "@/utils/displayUtils";
import {mapGetters} from "vuex";

export default {
  name: "index",
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data() {
    return {
      nowDevice: '当前生效配置',
      parameter: {
        id: 0,
        create_datatime: '20220504185026',
        temperature: 0,
        fire: 0,
        smoke: 0,
        is_light: true,
        light: '30'
      },
      abnormalCount: {
        temperature: '10',
        fire: '10',
        smoke: '10',
      },
      picture: [
        require("../../assets/pictures/temp.png"),
        require("../../assets/pictures/smoke.png"),
        require("../../assets/pictures/light.png"),
        require("../../assets/pictures/config.png"),
      ],
      configIntervalTask: null,
      abnormalIntervalTask: null
    }
  },
  mounted() {
    this.getNowConfig()
    this.getAbnormalCount()
    this.configIntervalTask = setInterval(this.getNowConfig,10000);//1000ms=1s，设定的代码循环运行时的间隔时间，单位为ms
    this.abnormalIntervalTask = setInterval(this.getAbnormalCount,10000)
  },
  destroyed() {
    clearInterval(this.configIntervalTask)
    clearInterval(this.abnormalIntervalTask)
  },
  methods: {
    // todo 获取异常时间api
    getAbnormalCount: function (){
      getDataAlarm(this.uid).then((data) => {
        this.abnormalCount.temperature = data.temNum.toString()
        this.abnormalCount.fire = data.fireNum.toString()
        this.abnormalCount.smoke = data.smokeNum.toString()
      }).catch((error) => {

      })
    },
    // todo 获取当前配置信息api
    getNowConfig:function () {
      getDataDisplay(this.uid).then((data) => {
        this.nowDevice = data.nowDevice
        this.parameter.id = data.id
        this.parameter.create_datatime = data.create_datatime
        this.parameter.temperature = parseFloat(data.temperature).toFixed(3)
        this.parameter.fire = parseFloat(data.fire)
        this.parameter.smoke = parseFloat(data.smoke)
        this.parameter.is_light = parseFloat(data.is_light)
        this.parameter.light = data.light
      }).catch((error) => {
        console.log(error)
      })
    }
  },
}

</script>

<style scoped>
.homepage{
  background:url("../../assets/background/homepage.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: 0px;/*上边距*/
  margin-left: -30px;/*左边距*/
  margin-right: 30px;
  background-size:100% 100%;
}
.text {
  font-size: 40px;
}

.item {
  padding: 18px 0;
  display: inline;
}

.box-card {
  width: 480px;
  border-radius: 10px;
}

.deviceCard {
  display: flex;
  justify-content: center;
  align-content: center;
  padding-top: 100px;
}
.time-row{
  margin-top: 100px;
}
</style>
